<template>
  <div class="boilerBox">
    <!-- 自定义的导航栏 -->
    <div class="header">锅炉</div>
    <div class="content">
      <!-- 锅炉选择 -->
      <div class="content-top">
        <div>
          <span class="click">老站锅炉</span>
          <span>新站锅炉</span>
        </div>       
      </div>
      <div class="content-list">
        <div class="row contentItem">
          <div>
            1#锅炉
          </div>
          <div class="gray row-flex">
            <div class="rangBox col-flex-around">
              <div class="rangBoxItem"></div>
            </div>
            <div class="boilText">正常</div>
            <div class="myicon iconfont icon-xiangyou"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      
     
    }
  },

  components: {
  
  },

  methods: {
    
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
  .boilerBox{
    height: 100%;
  }
  .content{
    height: 82%;
  }
  .content-top{
    height: 8%;
    padding:10rpx;
    text-align: center;
  }
  .content-list{
    height: 80%;
    overflow-y: auto;
  }
  .contentItem{
    background: red;
    height: 200%;
  }
  .content-top>div{
    text-align: center;
    width: 90%;
    border: 1px solid rgb(173, 154, 189);
    border-radius: 15rpx;
    height: 100%;
  }
  .content-top span{
    width: 50%;
    display: inline-block;    
  }
  .myicon{
    font-size: 20px
  }
  .rangBoxItem{
    height: 30rpx;
    width: 20rpx;
    background: green;
    border-radius: 50%
  }
  .boilText{
    margin: 0 20rpx 0 10rpx;
  }
  .click{
    color:white;
    background: rgb(173, 154, 189);
  }
</style>
